<template>
    <view class="container">
        <view class="header">
            <text class="title">用户登录</text>
        </view>
        
        <view class="form">
            <view class="input-group">
                <text class="label">用户名</text>
                <input 
                    class="input" 
                    type="text" 
                    v-model="username" 
                    placeholder="请输入用户名"
                    placeholder-class="placeholder"
                />
            </view>
            
            <view class="input-group">
                <text class="label">密码</text>
                <input 
                    class="input" 
                    type="password" 
                    v-model="password" 
                    placeholder="请输入密码"
                    placeholder-class="placeholder"
                    @confirm="handleLogin"
                />
            </view>
            
            <view class="button-group">
                <button 
                    class="btn login-btn" 
                    :loading="loading" 
                    @click="handleLogin"
                >
                    {{ loading ? '登录中...' : '登录' }}
                </button>
                
                <button 
                    class="btn register-btn" 
                    @click="goToRegister"
                >
                    去注册
                </button>
            </view>
        </view>
    </view>
</template>

<script>
const db = uniCloud.database();
const accountCollection = db.collection('Account');

export default {
    data() {
        return {
            username: '',
            password: '',
            loading: false
        }
    },
    methods: {
        async handleLogin() {
            if (!this.username.trim()) {
                uni.showToast({
                    title: '请输入用户名',
                    icon: 'none'
                });
                return;
            }
            
            if (!this.password.trim()) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                });
                return;
            }
            
            this.loading = true;
            
            try {
                // 查询用户
                const result = await accountCollection
                    .where({
                        username: this.username,
                        password: this.password // 实际项目中应该加密
                    })
                    .get();
                
                if (result.data.length > 0) {
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    });
                    
                    // 存储登录状态
                    uni.setStorageSync('userInfo', {
                        username: this.username,
                        userId: result.data[0]._id
                    });
                    
                    // 跳转到首页
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/index/index'
                        });
                    }, 1500);
                } else {
                    uni.showToast({
                        title: '用户名或密码错误',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('登录失败:', error);
                uni.showToast({
                    title: '登录失败，请重试',
                    icon: 'none'
                });
            } finally {
                this.loading = false;
            }
        },
        
        goToRegister() {
            uni.navigateTo({
                url: '/pages/register/register'
            });
        }
    }
}
</script>

<style>
@import './login.css';
</style>